<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>商品列表页</title>
  <link rel="stylesheet" href="/layui/css/layui.css">
  <link rel="stylesheet" href="/stylesheets/base.css">
  <script src="/layui/layui.js"></script>
  <script src="/javascripts/jquery.js"></script>
  <script src="/javascripts/ajax.js"></script>
</head>
<body>
<div class="layui-panel">
  <form class="layui-form" style="margin: 10px auto">
    <div class="layui-form-item">
      <div class="layui-inline">
        <label for="name" class="layui-form-label">商品名称</label>
        <div class="layui-input-inline">
          <input type="text" class="layui-input" name="name" id="name" placeholder="商品名称模糊查询">
        </div>
      </div>
      <div class="layui-inline">
        <label for="expire" class="layui-form-label">保质期范围</label>
        <div class="layui-input-inline">
          <input type="text" class="layui-input" name="expire" readonly id="expire" placeholder="选择保质期范围">
        </div>
      </div>
      <div class="layui-inline">
        <label for="supplierId" class="layui-form-label">供货商</label>
        <div class="layui-input-inline">
          <select name="supplierId" id="supplierId">

          </select>
        </div>
      </div>
      <div class="layui-inline">
        <label for="status" class="layui-form-label">状态</label>
        <div class="layui-input-inline">
          <select name="status" id="status">
            <option value="">[选择状态]</option>
            <option value="1">可用</option>
            <option value="2">禁用</option>
          </select>
        </div>
      </div>
      <div class="layui-inline">
        <div class="layui-input-inline">
          <button type="submit" lay-submit lay-filter="searchBtn" class="layui-btn">查询</button>
          <button type="reset" class="layui-btn">清空</button>
        </div>
      </div>
    </div>

  </form>
</div>
<div class="layui-panel">
  <table id="dataTable"></table>
</div>
</body>
<script type="text/html" id="toolbar">
  {{# if(top.loginInfo.role === 1 || top.loginInfo.role == 2){ }}
  <button type="button" class="layui-btn layui-btn-sm layui-bg-blue" lay-event="add">添加</button>
  {{# } }}

  {{# if(top.loginInfo.role === 3){ }}
  <button type="button" class="layui-btn layui-btn-sm layui-bg-blue" lay-event="applyInStore">申请入库</button>
  <button type="button" class="layui-btn layui-btn-sm layui-bg-blue" lay-event="applyOutStore">申请出库</button>
  {{# } }}
</script>
<script type="text/html" id="statusTemp">
  {{# if(d.status === 1){ }}
    <button type="button" class="layui-btn layui-btn-sm layui-bg-green" lay-event="status">可用</button>
  {{# }else{ }}
  <button type="button" class="layui-btn layui-btn-sm layui-bg-red" lay-event="status">禁用</button>
  {{# } }}
</script>
<script type="text/html" id="optTemp">
  <button type="button" class="layui-btn layui-btn-sm layui-bg-blue" lay-event="update">修改</button>
  <button type="button" class="layui-btn layui-btn-sm layui-bg-blue" lay-event="delete">删除</button>
</script>
<script>
  const {table,form,laydate} = layui;
  $(function () {
    getSupplerList();
    laydate.render({
      elem:"#expire",
      range:true,
      shortcuts: [
        {
          text: "上个月",
          value: function(){
            const date = new Date();
            const year = date.getFullYear();
            const month = date.getMonth();
            return [
              new Date(year, month - 1, 1),
              new Date(year, month, 0)
            ];
          }
        },
        {
          text: "这个月",
          value: function(){
            const date = new Date();
            const year = date.getFullYear();
            const month = date.getMonth();
            return [
              new Date(year, month, 1),
              new Date(year, month + 1, 0)
            ];
          }
        },
        {
          text: "下个月",
          value: function(){
            const date = new Date();
            const year = date.getFullYear();
            const month = date.getMonth();
            return [
              new Date(year, month + 1, 1),
              new Date(year, month + 2, 0)
            ];
          }
        }
      ]
    });
    table.render({
      elem:"#dataTable",
      url:"/goods/page",
      page:true,
      limit:5,
      limits:[5,10,20,50,100],
      toolbar:"#toolbar",
      cols:[[
        {field:"id",title:"编号",},
        {field: "name",title: "商品名称"},
        {field: "profile",title: "商品介绍",expandedMode:"tips"},
        {field: "count",title: "商品数量"},
        {field: "expire",title: "过期时间",templet: function (d) {
            const now = new Date();
            const expire = new Date(d.expire);
            const dateStr = formatDate(expire);
            if(now.getTime() > expire.getTime()){
              return `<span style="color: red">${dateStr}</span>`
            }
            return `<span>${dateStr}</span>`

          }},
        {field: "supplierName",title: "供货商"},
        {field: "createName",title: "创建人"},
        {field:"status",title: "状态",templet:"#statusTemp"},
        {title: "操作",templet:"#optTemp",width:160}
      ]]
    });
    form.on("submit(searchBtn)",function (data) {
      table.reload("dataTable",{
        where:data.field,
        page:{
          curr:1
        }
      })
      return false;
    })
    table.on("tool(dataTable)",function (data) {
      const event = data.event;
        if(top.loginInfo.role !== 3){
          const id = data.data.id;
          switch (event){
            case "status":
              layer.confirm(`确定更改编号[${id}]的状态吗？`,{icon:3,title:"询问"},function (index) {
                ajax.post("/goods/status",{id,status:data.data.status === 1?2:1
                }).then(()=>{
                  layer.msg("操作成功！",{icon:6});
                  reloadTable();
                })
                layer.close(index);
              })
              break;
            case "delete":
              layer.confirm(`确定删除编号[${id}]的数据吗？`,{icon:3,title:"询问"},function (index) {
                ajax.delete("/goods/delete/"+id).then(()=>{
                  layer.msg("删除成功！",{icon:6});
                  reloadTable();
                })
                layer.close(index);
              })
              break;
            case "update":
              layer.open({
                type:2,
                content:"/goods/edit?id="+id,
                area:["600px","500px"]
              })
              break;
            default:
              break;
          }
        }else{
          layer.msg("没有操作权限！",{icon:5})
        }
    })
    table.on("toolbar(dataTable)",function (data) {
      const event = data.event;
      const checkStatus = table.checkStatus(data.config.id); //获取选中行状态
      switch (event){
        case "add":
          layer.open({
            type:2,
            content:"/goods/edit",
            area:["600px","500px"]
          })
          break;
        case "applyInStore":
        case "applyOutStore":
          if(checkStatus.data.length === 0){
            layer.msg('请选择一个商品！',{icon:5})
          }else{
            layer.prompt({
              value:"0"
            },function (value,index) {
              if(value == 0){
                layer.msg('申请数量必须大于0！',{icon:5})
                return;
              }
              if(event === "applyOutStore"){
                if(value > checkStatus.data[0].count){
                  layer.msg("申请数量不能超过商品总数",{icon:5})
                  return;
                }
              }
              ajax.post("/apply/apply",{goodsId:checkStatus.data[0].id,count:value,type:event === "applyInStore" ? 1 : 2}).then(()=>{
                layer.msg("申请成功！",{icon:6});
              })
              layer.close(index);
            })
          }
          break;
      }

    })
    table.on("row(dataTable)",function (data){
      // 标注当前点击行的选中状态
      data.setRowChecked({
        type: 'radio' // radio 单选模式；checkbox 复选模式
      });
    })
  })

  function reloadTable() {
    table.reload('dataTable');
  }

  function getSupplerList() {
    ajax.get('/supplier/select').then(data=>{
      let $html = `<option value="">[选择供货商]</option>`
      for(const s of data){
        $html+=`<option value="${s.id}">${s.name}</option>`
      }
      $("#supplierId").empty().append($html);
      form.render();
    })
  }
</script>
</html>
